<template>
	<view class="message-tabs-container">
		<!-- 标签栏 -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" class="custom-tabs"></u-tabs>

		<view>
			<!-- 未登录时，内容为空 -->
			<view v-if="!isLogin">
				<u-empty text="请先登录后，才能查看" mode="list"></u-empty>
			</view>
			<!-- 内容区域 -->
			<view class="tabs-content" v-else>
				<view v-if="allMessage" class="tab-pane">
					<all-message-vue></all-message-vue>
				</view>
				<view v-if="resMessage" class="tab-pane">
					<res-message-vue></res-message-vue>
				</view>
				<view v-if="orderMessage" class="tab-pane">
					<order-message-vue></order-message-vue>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allMessageVue from './allMessage.vue';
	import resMessageVue from './resMessage.vue';
	import orderMessageVue from './orderMessage.vue';
	export default {
		components: {
			allMessageVue,
			resMessageVue,
			orderMessageVue
		},
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '预约'
				}, {
					name: '商城',

				}],
				allMessage: true,
				resMessage: false,
				orderMessage: false,
				current: 0
			}
		},
		computed: {
			isLogin() {
				return uni.getStorageSync('isLogin')
			}
		},
		methods: {
			change(index) {
				this.current = index;
				// 简化逻辑，提高可维护性
				this.allMessage = index === 0;
				this.resMessage = index === 1;
				this.orderMessage = index === 2;
			}
		}
	}
</script>

<style scoped>
	/* 容器样式 */
	.message-tabs-container {
		width: 100%;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 自定义标签栏样式 */
	::v-deep .custom-tabs {
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 标签项样式 */
	::v-deep .u-tabs__item {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		color: #666666;
		position: relative;
		transition: all 0.3s ease;
	}

	/* 激活状态标签 */
	::v-deep .u-tabs__item--active {
		color: #3274ff;
		font-weight: 500;
	}

	/* 激活状态下划线 */
	::v-deep .u-tabs__line {
		background-color: #3274ff !important;
		height: 6rpx !important;
		width: 40rpx !important;
		border-radius: 3rpx !important;
		bottom: 0 !important;
	}

	/* 未读消息提示 */
	::v-deep .u-badge {
		position: absolute;
		top: 20rpx;
		right: 15rpx;
		min-width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		background-color: #ff4d4f;
		color: #ffffff;
		border-radius: 15rpx;
		padding: 0 8rpx;
	}

	/* 内容区域样式 */
	.tabs-content {
		padding: 20rpx 30rpx;
	}

	/* 标签面板样式 */
	.tab-pane {
		width: 100%;
		min-height: calc(100vh - 90rpx - 40rpx);
	}

	/* 空状态样式 (可在子组件中使用) */
	::v-deep .empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999999;
	}

	::v-deep .empty-icon {
		font-size: 100rpx;
		margin-bottom: 30rpx;
		color: #d9d9d9;
	}

	/* 加载更多样式 (可在子组件中使用) */
	::v-deep .load-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999999;
		font-size: 26rpx;
	}
</style>